<template>
	<view>
		<view class="tabs">
			<view class="tabs-item" :class="{selected:index == active}" v-for="(item,index) in tabs" :key="item.value"
				@click="active =index">
				{{item.label}}
				<view v-if="index == active" class="tabs-item-bottom"></view>
			</view>
		</view>

		<scroll-view scroll-x class="plan">
			<view class="plan-item" v-for="(item, index) in planList" :key="item.value"
				:class="{ selected: planActive === index }" @click="planActive = index">
				{{ item.label }}
			</view>
		</scroll-view>


		<view class="record">
			<view class="record-cover">
				<view class="list">
					<view class="list-item" v-for="item in list">
						<view class="list-item-name">小夜曲</view>
						<image class="list-item-sex" src="/static/img/ic-sex-0.png"></image>
						<view class="list-item-phone">187567565785</view>
						<view class="list-item-class">3年二班</view>
						<view class="list-item-plan">
							<!-- <view class="list-item-plan-name">2025年第一次体测</view> -->
							<view class="list-item-plan-project">
								<view class="list-item-plan-project-label">
									50米跑
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<view class="list-item-plan-project-label">
									立定跳远
								</view>
								<!-- <view class="list-item-plan-project-label">
									立定跳远
								</view> -->
							</view>
						</view>
						<view class="list-item-status">未解锁</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				tabs: [{
					label: '全部',
					value: 0
				}, {
					label: '已解锁',
					value: 1
				}, {
					label: '未解锁',
					value: 2
				}, {
					label: '已通知未解锁',
					value: 3
				},
				 ],
				planList: [{
					label: '2025年第一次体测',
					value: 0
				}, {
					label: '2025年第2次体测',
					value: 1
				
				}, {
					label: '2025年第3次体测',
					value: 2
				}, {
					label: '2025年第4次体测',
					value: 3
				} ],
				planActive: 0,
				active: 0,
				value: 90,
				list: [{
						type: 1,
					},
					{
						type: 1
					}, {
						type: 2
					}, {
						type: 2
					},
					{
						type: 2
					}, {
						type: 2
					},
				]
			}
		},

		methods: {
			//学生详情
			goDetail() {
				uni.navigateTo({
					url: '/pages/student/detail'
				})
			},
			//历史成绩
			goHistory() {
				uni.navigateTo({
					url: '/pages/student/history'
				})
			},
			//个人中心
			goMine() {
				uni.navigateTo({
					url: '/pages/mine/index'
				})
			},
			//消息通知
			goMsg() {
				uni.navigateTo({
					url: '/pages/msg/index'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.plan {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		margin: 20rpx 30rpx;
		box-sizing: border-box;
		width: 680rpx;
		scrollbar-width: none;
		/* 隐藏滚动条（部分端有效） */
	}

	.plan::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	.plan-item {
		flex-shrink: 0;
		/* 防止被压缩 */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40rpx;
		border-radius: 28rpx;
		padding: 8rpx 24rpx;
		margin-right: 20rpx;
		background: #f1fffc;
		color: #999;
		transition: all 0.2s ease;
	}

	.plan-item.selected {
		color: #1a1a1a;
		background: #cfffef;
	}


	.tabs {
		margin: 20rpx 30rpx;
		display: flex;

		&-item {
			padding: 0 20rpx;
			color: #999;
			font-size: 32rpx;

			&.selected {
				color: #1A1A1A;
			}

			&-bottom {
				margin: auto;
				width: 28rpx;
				height: 6rpx;
				border-radius: 3rpx;
				background: #647FFB;
			}

		}
	}

	.list {
		display: flex;
		flex-direction: column;
		align-items: center;

		&-item {
			width: 680rpx;
			border-radius: 20rpx;

			background: #FFFFFF;
			box-sizing: border-box;
			padding: 20rpx;
			margin-bottom: 20rpx;
			position: relative;

			&-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			&-sex {
				position: absolute;
				left: 180rpx;
				top: 26rpx;
				width: 32rpx;
				height: 32rpx;

			}

			&-phone {
				margin-top: 16rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}

			&-class {
				position: absolute;
				right: 40rpx;
				top: 70rpx;
				color: #666;
				font-size: 28rpx;
			}

			&-status {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				padding: 4rpx 30rpx;
				border-radius: 0px 20rpx 0px 20rpx;
				background: linear-gradient(90deg, #FFD26F 0%, #FFA100 100%);
				color: #fff;

			}

			&-plan {

				border-radius: 8px;
				padding: 12rpx 18rpx;
				box-sizing: border-box;


				&-name {
					color: #1A1A1A;
					font-size: 28rpx;
				}

				&-project {
					margin-top: 10rpx;
					display: flex;
					flex-wrap: wrap;
					background: #F1FFFC;

					&-label {
						width: 180rpx;
						box-sizing: border-box;
						padding: 4rpx 20rpx;
						color: #1A1A1A;
						font-size: 28rpx;
					}
				}
			}

		}
	}


	.record {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		position: relative;

		&-cover {}
	}
</style>